<template>
  <div class="not-found-container">
    <h1 class="error-title">404</h1>
    <p class="error-description">抱歉，您访问的页面不存在</p>
    <el-button type="primary" @click="goHome">返回首页</el-button>
  </div>
</template>

<script>
/**
 * 404页面
 * 用户访问不存在的页面时显示
 */
import { useRouter } from 'vue-router'

export default {
  name: 'NotFound',
  setup() {
    const router = useRouter()
    
    // 返回首页
    const goHome = () => {
      router.push('/')
    }
    
    return {
      goHome
    }
  }
}
</script>

<style scoped>
.not-found-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f5;
}

.error-image {
  max-width: 300px;
  margin-bottom: 30px;
}

.error-title {
  font-size: 72px;
  color: #409EFF;
  margin: 0 0 20px;
}

.error-description {
  font-size: 20px;
  color: #606266;
  margin-bottom: 30px;
}
</style> 